<template>
  <div class="layout-container">
    <div class="layout-container-form" style="flex-direction: column">
      <div class="layout-container-form-search">
        <el-row style="text-align: left">
          <el-col :span="24">
            <el-form label-width="90px" :inline="true">
              <el-form-item label="用户ID：">
                <el-input v-model="query.user_id" placeholder="请输入用户ID" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item label="手机号：">
                  <el-input v-model="query.phone" placeholder="请输入手机号" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item label="权限：">
                  <el-input v-model="query.auth" placeholder="请输入项目ID" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
               <el-form-item label="注册时间：">
                  <el-date-picker v-model="query.register_time" type="datetimerange" prefix-icon="el-icon-date"
                    range-separator="→" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" @change="changeEffectiveTime" />
                </el-form-item>
              <el-form-item label="姓名：" >
                <el-input v-model="query.real_name" placeholder="请输入用户姓名" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
                <!-- <el-select v-model="query.status" placeholder="请输入用户姓名" style="width: 100%" 
                    @change="getTableData(true)">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              </el-form-item>
              <el-form-item label="邮箱：">
                <el-input v-model="query.email" placeholder="请输入用户邮箱" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
               <el-form-item label="当前芝草：">
                  <el-input v-model="query.balance" placeholder="请输入当前芝草" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item label="最后一次登陆时间：" label-width="150px">
                  <el-date-picker v-model="query.last_login_time" type="datetimerange" prefix-icon="el-icon-date"
                    range-separator="→" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" @change="changeEffectiveTime" />
                </el-form-item>
             <el-form-item label="昵称：">
                  <el-input v-model="query.nick_name" placeholder="请输入用户昵称" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item label="实名状态：">
                   <el-select v-model="query.is_authentication" placeholder="请选择实名状态" style="width: 100%" 
                    @change="getTableData(true)">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
               <el-form-item label="本月兑换芝草："  label-width="110px">
                  <el-input v-model="query.this_month_used_balance" placeholder="请输入本月兑换芝草" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
               <el-form-item></el-form-item>
               <el-form-item label="团队编号：">
                  <el-input v-model="query.team_number" placeholder="请输入团队编号" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item label="状态：">
                   <el-select v-model="query.status" placeholder="请选择状态" style="width: 100%" 
                    @change="getTableData(true)">
                    <el-option v-for="item in productTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
               <el-form-item label="历史芝草：">
                  <el-input v-model="query.history_balance" placeholder="请输入历史芝草" style="width: 100%"
                  @keyup.enter="getTableData(true)"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="search-btn" style="margin-left: 8px" @click="resetSearch">{{
                    $t("message.common.reset")
                }}</el-button>
                <el-button type="primary" class="search-btn" @click="getTableData(true)">{{ $t("message.common.search")
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="layout-container-opt" style="">
         <div style="padding:0 20px 0 20px">
            <el-checkbox v-model="checkAll" label="1" @change="changeAll">全选</el-checkbox>
        </div>
        <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type="'primary'"
          :loading="exportBatchLoading" @click="handleBatchImport">
          批量导入用户账号
        </el-button>
        <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type=" 'primary'" 
          :loading="exportBatchLoading" @click="handleBatchUpdate">
          批量更新用户账号
        </el-button>
         <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type="'primary'" :disabled="selectData.length === 0"
          :loading="exportBatchLoading" @click="exportExcelFun">
          批量导出所选用户数据
        </el-button>
        <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type="'primary'"
          :loading="exportBatchLoading" @click="handleBatchImportDel()">
          上传表格批量删除用户
        </el-button>
        <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type="selectData.length > 0 ? 'primary' : ''" :disabled="selectData.length === 0"
          :loading="exportBatchLoading" @click="handleOpt({},1,6)">
          批量删除所选数据
        </el-button>
         <el-button
          v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions && adminInfo.action_permissions.includes('3'))"
          :type="'primary' "
          :loading="exportBatchLoading" @click="handleOpt({},1,7)">
          强制刷新排行榜数据
        </el-button>
        <el-button class="search-btn" icon="el-icon-refresh-right" style="position:absolute;right:0;bottom:8px;"
          @click="getTableData(true)">{{ $t("message.common.refresh") }}</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table ref="table" v-model:page="page" v-loading="loading" :showSelection="true"
       :data="tableData"
        @getTableData="getTableData" @selection-change="handleSelectionChange">
            <el-table-column 
            v-for="(item,index) in columns" :type="item.type" :key="index"
            :label="item.label"
            :width="item.width"
            :sortable="item.sortable"
            :property="item.property">
                <template #default="scope" v-if="item.input">
                    <el-input v-model="scope.row.dict_number" placeholder="" />
                </template>
                <template #default="scope" v-else-if="item.copy">
                    <span>{{scope.row[item.property]}} '
                        <el-icon class="cup" v-copy="scope.row[item.property]"  color="#409eff"><DocumentCopy /></el-icon>
                    </span>
                </template>
                <template #default="scope" v-else-if="item.password">
                    <div class="pwd-hover">
                      <span class="pwd-ciphertext">*********</span>
                      <span class="pwd-plaintext">{{Base64.decode(scope.row.pass_word)}}</span>
                    </div>
                </template>
                <template #default="scope" v-else-if="item.image">
                    <el-image
                      v-if="scope.row[item.property]"
                      style="width: 50px; height: 50px; cursor: pointer;"
                      :src="scope.row[item.property]"
                      fit="scale-down"
                      :preview-src-list="[scope.row[item.property]]"
                    />
                    <div  v-else class="no-img" > 暂无图片 </div>
                </template>
                <template #default="scope" v-else-if="item.tooltip">
                    <el-popover
                        :teleported="true"
                        :popper-style="{position:'unset',}"
                        placement="bottom"
                        @show="(()=>{getuserBalanceDetail(item.property,scope.row)})"
                        :disabled="scope.row[item.property] ===''?true:false"
                        :title="item.property == 'id_card_number'?'身份证号码：' + scope.row[item.property] :''"
                        width="300px"
                        trigger="hover">
                        <div slot="content">
                            <template v-if="item.property == 'team_people_level'">
                                <div v-for="(el, i) in historyPeopleLevelArr" :key="i">
                                    {{el}}
                                </div>
                            </template>
                            <template v-else-if="item.property == 'id_card_number'">
                                <div class="flex-center">
                                   <el-image
                                    v-if="scope.row.id_card_face"
                                    style="width: 80px; height: 50px; cursor: pointer;"
                                    
                                    :src="scope.row.id_card_face"
                                    @click="showProview(scope.row.id_card_face,scope.row.id_card_back)"
                                  />
                                  <el-image
                                    v-if="scope.row.id_card_back"
                                    style="width: 80px; height: 50px; cursor: pointer;"
                                    :src="scope.row.id_card_back"
                                    @click="showProview(scope.row.id_card_back,scope.row.id_card_face)"
                                  />
                                </div>
                                <div class="flex-center">
                                   <el-button type="text" class="">点击图片放大查看</el-button>
                                </div>
                               
                            </template>
                            <template v-if="item.property == 'balance'">
                               <p>当前芝草：{{balanceDetail.balance}}</p>
                               <p>本月以兑换芝草：{{balanceDetail.this_month_amount}}（{{ balanceDetail.this_month_amount/100}}）</p>
                               <p>历史累计支出芝草：{{balanceDetail.history_pay || 0}}</p>
                               <p>历史累计获得芝草：{{balanceDetail.history_income || 0}}</p>
                            </template>
                            <template v-else-if="item.property == 'SystemUserRestriction'">
                                <div v-for="(el, i) in scope.row.SystemUserRestriction" :key="i">
                                   {{el.project_id}}、{{el.limit}}题；{{el.lower_limit}}题；{{el.cd}}秒；{{el.day_limit}}题；{{el.day_give_up_limit}}题；
                                </div>
                            </template>
                            <template v-else-if="item.property == 'id_card_number'">
                              
                            </template>
                            <template v-else>
                                {{scope.row[item.property]}}
                            </template>
                        </div>
                        <template #reference>
                             <template v-if="item.property == 'balance'">
                                <div class="flex-start-nowarp">
                                  {{scope.row[item.property]}}
                                  <el-button type="text">查看</el-button>
                                </div>
                            </template>
                            <el-button v-else type="text">{{scope.row[item.property] == ''?'无':'查看'}}</el-button>
                        </template>
                    </el-popover>
                </template>
                <template #default="scope" v-else-if="item.realName">
                    <div>
                      <span :class="[item.classes]">{{scope.row[item.property]}}</span>
                      <el-button type="text" style="color:#e6a23c"  v-if="scope.row.is_authentication == 0" >(未实名)</el-button>
                      <el-button type="text" style="color:#67c23a"  v-if="scope.row.is_authentication == 1" >(已实名)</el-button>
                    </div>
                </template>
                <template  #default="scope" v-else>
                    <template v-if="item.property">
                        <el-input
                            v-if="scope.row.showInput" 
                            v-model="scope.row[item.property]" 
                            placeholder="" />
                        <span v-else :class="[item.classes]">{{scope.row[item.property]}}</span>
                    </template>
                </template>
                
            </el-table-column>
            <!-- <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-upload ref="upload" :accept="uploadObjImg.accept" :show-file-list="false" :auto-upload="true"
                      :http-request="((file)=>{return uploadFileFun(file,scope.row,scope.$index)})">
                      <template #default>
                         <el-button type="text" >上传图片</el-button>
                      </template> 
                    </el-upload>
                   
                    <el-button type="text"  v-if="scope.row.status == 0" @click="handleOpt(scope.row,scope.$index,3)">上架</el-button>
                    <el-button type="text" style="color:#e6a23c" v-if="scope.row.status == 1" @click="handleOpt(scope.row,scope.$index,4)">下架</el-button>
                    <el-button type="text"  style="color:#f56c6c"  @click="handleOpt(scope.row,scope.$index,5)">删除</el-button>
                    
                </template>
            </el-table-column> -->
      </Table>
    </div>
    <el-image-viewer v-if="showViewer" @close="closeProview" :url-list="previewList" />
      <!-- 上传文件弹出框组件 -->
        <BatchImportDialog 
        v-if="uploadObj.visible"
        :visible="uploadObj.visible"
        :title="uploadObj.title"
        :uploadObj="uploadObj"
        @closeUploadDialog="closeUploadDialog"
        @refreshTable="refreshTable"/>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";
// import ElImageViewer from 'element-ui/packages/image-viewer'

import Copy from '@/directive/copy'
  export default defineComponent({
    directives: {
      Copy
    },
    setup(props) {
    }
  })
</script>
<script setup lang="ts">
import {  ref, reactive } from "vue";
import { Page } from "@/components/table/type";
import { ElMessage, ElMessageBox ,ElIcon,ElImageViewer } from "element-plus";
import BatchImportDialog from "@/components/uploadFile/batchImportDialog.vue";
import {
  DocumentCopy
} from '@element-plus/icons-vue'
import { Base64 } from 'js-base64';
import Table from "@/components/table/index.vue";
import {
  productList,productUpdate,productPicture,productImports,refreshIncomeRank
} from "@/api/exchange.ts";
import { batchImportUser, getUserList ,userBalanceDetail, userBatchDel ,batchExportUser} from "@/api/service/user.ts"
import { dateFormat, intervalTime, calculateDiffTime } from "@/utils/index.ts";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ossPrefixNew,ossPrefix } from "@/utils/index.ts";
const router = useRouter();
const store = useStore();
const adminInfo = reactive(store.state.user.adminInfo);
const showViewer = ref(false)
const previewList = ref([])
const showProview = (url1:string,url2:string)=>{
  showViewer.value = true;
  previewList.value = [url1,url2]
}
const closeProview = ()=>{
  showViewer.value = false;
}

// 存储搜索用的数据
const query = reactive({
  "user_id":"",
  "phone":"",
  "auth":"",
  "register_time":[],
  "real_name":"",
  "email":"",
  "balance":"",
  "last_login_time":[],
  "nick_name":"",
  "is_authentication":"",
  "this_month_used_balance":"",
  "team_number":"",
  "status":"",
  "history_balance":"",
});
// 状态 0 未生效 1已完成 2 已领取 3指派中 4返修中 5 闲置中 6 已作废
const statusOptions = ref([
   {
    label: '全部',
    value: '-1'
  },
  {
    label: '未实名',
    value: '0'
  },
  {
    label: '已认证',
    value: '1'
  }
])
const productTypeList = ref([
   {
    label: '全部',
    value: '-1'
  },
  {
    label: '正常',
    value: '1'
  },{
    label: '封禁',
    value:'2'
  },{
    label: '注销',
    value: '0'
  },
])

// 状态change事件
const changeStatus = () => {
  getTableData(true);
}

// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 50,
  total: 0,
});
// 重置
const resetSearch = () => {
    query.user_id = ''//
    query.phone = ''//, // string
    query.auth = ''//, // string
    query.register_time = []//, // string
    query.real_name = ''//, // string
    query.email = ''// // string
    query.balance = ''// // string
    query.last_login_time = []// // string
    query.nick_name = ''// // string
    query.is_authentication = ''// // string
    query.this_month_used_balance = ''// // string
    query.team_number = ''// // string
    query.status = ''// // string
    query.history_balance = ''// // string
    getTableData(true);
}
const columns = ref([])
const columns1 = reactive([
    {
        label:'序号',
        property:'Id', 
        width:'55',
    },
    {
        label:'用户ID',
        property:'user_id',
    },{
        label:'团队编号',
        property:'team_number',
    },{
        label:'昵称',
        property:'nick_name',
    },{
        label:'姓名',
        property:'real_name',
        classes:'blue',
        realName:true,
        width:'120px',
    },{
        label:'手机号',
        property:'phone',
    },{
        label:'邮箱',
        property:'email',
    },{
        label:'密码',
        property:'pass_word',
        password:true,
    },{
        label:'支付宝',
        property:'alipay_account',
    },{
        label:'地址',
        property:'delivery_address',
        tooltip:true,
    },{
        label:'个人简介',
        property:'introduction',
        tooltip:true,
    },{
        label:'身份证信息',
        property:'id_card_number',
        tooltip:true,
    },{
        label:'我的芝草',
        property:'balance',
        tooltip:true,
        width:'120px',
    },{
        label:'头像',
        property:'avatar',
        image:true,
    },{
        label:'状态',
        property:'statusName',
    },{
        label:'注册时间',
        property:'created_at',
        sortable:true,
        width:'110px',
    },{
        label:'最后一次登陆时间',
        property:'last_login_time',
        sortable:true,
        width:'140px',
    },{
        label:'领取限制',
        property:'SystemUserRestriction',
        tooltip:true,
    },
]);
columns.value = columns1
const loading = ref(false);
const tableData = ref([]);

const getParams = ()=>{
    let obj = {
        "user_id":"",
        "phone":"",
        "auth":"",
        "register_time":[],
        "real_name":"",
        "email":"",
        "balance":"",
        "last_login_time":[],
        "nick_name":"",
        "is_authentication":"",
        "this_month_used_balance":"",
        "team_number":"",
        "status":"",
        "history_balance":"",
        ...query
    }
    Object.keys(obj).map(item => {
        if(obj[item] == ''){
            delete obj[item]
        }else if(typeof(obj[item]) == 'object'){
          if(obj[item].length){
             obj[item +'_start'] = obj[item][0]
             obj[item +'_end'] = obj[item][1]
          }
          delete obj[item]
        }else{
          obj[item] += ''
        }
    })
   
    if(obj.status == -1 || obj.status === ''){
        delete obj.status
    }
    if(obj.is_authentication == -1 || obj.is_authentication === '' ){
        delete obj.is_authentication
    }
    obj ={
      ...obj,
      page: page.index,
      page_size: page.size,
    }
    return obj
}

const table = ref()
const checkAll = ref(false)
const changeAll = (e:any)=>{
    console.log(checkAll.value)
    if(e){
      if(selectData.value.length == tableData.value.length) return
        table.value.$refs.systemTable.toggleAllSelection()
    }else{
      selectData.value = [];
      table.value.$refs.systemTable.clearSelection()
    }
}
// 勾选数据
const selectData = ref([]); // 系统id
const handleSelectionChange = (data: any) => {
  selectData.value = [];
  if(data.length){
    if(data.length != tableData.value.length){
      checkAll.value = false
    }
    data.forEach((item: any) => {
      selectData.value.push(item.Id);
    });
  }
};



// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: Boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = getParams()
  getUserList(params)
    .then((res: any) => {
      let data = res.data.list;

      data.forEach((d: any) => {
        d.loading = false;
        d.last_login_time = d.last_login_time == '0001-01-01T00:00:00Z'?'':dateFormat(d.last_login_time)
        d.created_at = dateFormat(d.created_at)
        d.statusName = d.status == 1?'正常':d.status == 2? '封禁':'注销'
      });
      tableData.value = data;
      if(checkAll.value){
         changeAll(true)
      }else{
        changeAll(false)
      }
      page.total = Number(res.data.count);
    })
    .catch(() => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};
const tooltipType = ref('')
const historyPeopleLevelArr = ref([]);
const getHistoryPeopleLevel = (row:any)=>{
    if(row.property == ''){
        historyPeopleLevel({id:row.Id}).then(res => {
            if(res.code == 200){
                historyPeopleLevelArr.value =res.data.list 
            }else{
                ElMessage.success(res.message);
            }
        })
    }
    
}

const balanceDetail = ref({})
const getuserBalanceDetail = (property:string,row:any)=>{
    if(property  !=  'balance') return
    userBalanceDetail({user_id:row.user_id}).then(res => {
        if(res.code == 200){
            balanceDetail.value = res.data;
        }else{
            ElMessage.success(res.message);
        }
    })
}
// 操作
const handleOpt = (row: any ,index:Number,type: Number) => {
  ElMessageBox.confirm(`是否确认当前操作?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  })
    .then(() => {
      let par = {
        ids:[row.Id ],
      }
      if(type == 5){// 删除
      
      }else if(type ==6){//批量删除
        exportBatchLoading.value = true;
        par = {
          ids:[],
        }
        let ids = []
        selectData.value.map(item => {
          ids.push(item )
        })
        par.ids = ids
      }else if(type  == 7){
        
      }
      setProfileUdate(par,row,index)
    })
    .catch(() => { });
};
const refreshIncomeRankFunc = ()=> {
    userBatchDel().then(res => {
        if(res.code == 200){
           ElMessage.success('操作成功！');
           getTableData()
        }else{
           ElMessage.success(res.message);
        }
    })
}

const setProfileUdate = (par:any,row:Object,index:Number)=> {

     userBatchDel(par).then(res => {
        exportBatchLoading.value = false;
        if(res.code == 200){
           ElMessage.success('操作成功！');
           getTableData(false)
        }else{
           ElMessage.success(res.message);
        }
    })
}

const uploadObjImg = reactive({
  accept: ".png, .jpg, .jpeg",
});

const uploadFileFun = (fileInfo: any,row:any,index:any) => {
  let file = fileInfo.file;
  const fileType = [".png", ".jpg", ".jpeg"];
  const type = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();
  // 上传类型限制
  if (!fileType.includes(type)) {
    let type = fileType.join("，");
    ElMessage.error(`温馨提示：只支持${type}格式的文件`);
    return;
  }
  // 上传大小限制
  const sizeLimit = file.size / 1024 / 1024 <= 5;
  if (!sizeLimit) {
    ElMessage.error("文件最大不能超过5MB");
    return;
  }

  let formData = new FormData();
  formData.append("file", file);
  formData.append("product_id", row.product_id);

  let data = {
    data: formData,
  };
  productPicture(data).then((res: any) => {
    if (res.code) {
      ElMessage.success(`上传成功`);
      tableData.value.splice(index,1,{...row,product_picture_path:res.data})
    }
  });
};





// 导出题目答案与表格
const exportBatchLoading = ref(false);
const exportSingleLoading = ref(false);
const exportExcelFun = () => {
  exportBatchLoading.value = true;
  exportExcelPost(selectData.value)
}
// 导出通用函数
const exportExcelPost = (ids: any) => {
  let data = {
    ...getParams(),
    ids:[]
  }
  delete data.page
  delete data.page_size
  if(checkAll.value){
    delete data.ids
  }else{
    if(ids){
      data.ids = selectData.value
    }
  }
  batchExportUser(data).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('导出成功');
      window.open(res.data);
    }
  }).finally(() => {
    exportBatchLoading.value = false;
    exportSingleLoading.value = false;
  })
}
// 批量导入用户
const uploadObj = reactive({
  fileType: ['.xls', '.xlsx'],
  accept: '.xls, .xlsx', // 文件上传类型
  multiple: false, // 是否支持多选
  visible: false,
  title: '',
  url: '', // 批量导入用户接口地址
  type:'team',
  downloadObj: {
    name: '',
    url: ''
  }
});
const closeUploadDialog = ()=>{
    uploadObj.visible = false
}
const refreshTable = ()=>{
    ElMessage.success("导入成功！")
    closeUploadDialog()
    getTableData()
}

const handleBatchImport = () => {
  uploadObj.visible = true;
  uploadObj.title = '批量导入用户账号';
  uploadObj.url = '/admin/user/excel/imports';
  uploadObj.downloadObj.name = '用户账号开通表.xlsx'; // excel模板名称
  uploadObj.downloadObj.url = `${ossPrefixNew}用户账号开通表.xlsx`; // excel模板下载地址
}
const handleBatchImportDel = () => {
  uploadObj.visible = true;
  uploadObj.title = '上传表格批量删除用户';
  uploadObj.url = '/admin/user/upload_batch_del';
  uploadObj.downloadObj.name = '用户账号删除注销表.xlsx'; // excel模板名称
  uploadObj.downloadObj.url = `${ossPrefixNew}用户账号删除注销表.xlsx`; // excel模板下载地址
}

// 批量更新用户信息
const handleBatchUpdate = () => {
  uploadObj.visible = true;
  uploadObj.title = '批量更新用户账号';
  uploadObj.url = '/admin/user/excel/batch_update';
  uploadObj.downloadObj.name = '用户账号信息变更表.xlsx'; // excel模板名称
  uploadObj.downloadObj.url = `${ossPrefixNew}用户账号信息变更表.xlsx`; // excel模板下载地址
}

getTableData(true);
</script>

<style lang="scss" scoped>
.layout-container-form {
  position: relative;
  .el-form-item{
    width: 25%;
  }
  .el-form-item-flexstart{
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
  }
}

.layout-container-form-search {
  width: 100%;
  display: inline-block !important;
  justify-content: flex-start !important;

  .search-btn {
    margin-right: 10px;
    ;
  }
}
.flex-start-nowarp{
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
}
.layout-container-opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
}

.split-line {
  margin: 0 8px;
  color: #ccc;
}

.image-slot {
  width: 50px;
  height: 50px;
  background: #fafafa;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}
.cup{
    cursor: pointer;
}
.blue{
    color: #027db4;
}
.pwd-plaintext{
  display: none;
}
.pwd-hover:hover{
  cursor: pointer;
  .pwd-ciphertext{
    display: none;
    cursor: pointer;
  }
  .pwd-plaintext{
    display: block;
    cursor: pointer;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
}
</style>
